<template>
    <div class="my-page" style="background-color: lightblue;">
      <div class="user-info">
        <img :src="userAvatar" alt="用户头像" />
        <div>
          <h2>用户名</h2>
          <p>等级：VIP 3</p>
        </div>
      </div>
      <div class="menu">
        <ul>
          <li>本地音乐<span class="count">87</span></li>
          <li>我的下载<span class="count">103</span></li>
          <li>我的收藏<span class="count">87</span></li>
          <li>最近播放<span class="count">99</span></li>
          <li>我的歌单<span class="count">3</span></li>
        </ul>
      </div>
      <div class="recommended-playlists">
        <h3>为您推荐的歌单</h3>
        <div class="playlist">
          <img src="https://img95.699pic.com/photo/40065/2291.jpg_wh300.jpg!/fh/300/quality/90" alt="歌单封面" width="50" height="50" />
          <h4>流行金曲精选</h4>
        </div>
        <div class="playlist">
          <img src="https://img95.699pic.com/photo/40065/2291.jpg_wh300.jpg!/fh/300/quality/90" alt="歌单封面" width="50" height="50" />
          <h4>经典摇滚回顾</h4>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  const userAvatar = 'https://images.unsplash.com/photo-1689180689821-696966c97c80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80'
  </script>
  
  <style scoped>
  .my-page {
    padding: 20px;
  }
  
  .user-info {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  
  .user-info img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 10px;
  }
  
  .menu ul li {
    display: flex;
    align-items: center;
  }
  
  .menu ul li span.count {
    margin-left: auto;
  }
  
  .menu ul {
    list-style-type: none;
    padding: 0;
  }
  
  .menu ul li {
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
  }
  
  .menu ul li:last-child {
    border-bottom: none;
  }
  
  .menu ul li a {
    text-decoration: none;
    color: #333;
  }
  
  .recommended-playlists {
    margin-top: 20px;
  }
  
  .recommended-playlists h3 {
    margin-bottom: 10px;
  }
  
  .recommended-playlists.playlist {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  
  .recommended-playlists.playlist img {
    width: 50px;
    height: 50px;
    margin-right: 10px;
  }
  </style>
  